<template>
  <a-card class="body-container">
    <s-list-form>
      <template #less>
        <s-form-item size="list-middle" label="异常信息">
          <s-input v-model="query.exceptionMsg" placeholder="异常信息" />
        </s-form-item>
        <s-form-item size="list-middle" label="报错时间">
          <s-date-picker
            v-model="query.happenTime"
            :placeholder="['开始时间', '结束时间']"
            show-time
            type="range"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </s-form-item>
      </template>
    </s-list-form>
    <s-tool-bar>
      <template #left>
        <a-popconfirm
          v-if="authorize.deleteMulti"
          title="确认删除所选数据？"
          ok-text="是"
          cancel-text="否"
          @confirm="deleteMulti"
        >
          <s-button type="danger" icon="delete-outlined">删除</s-button>
        </a-popconfirm>
      </template>
      <template #right>
        <s-button type="primary" icon="search-outlined" @click="search"> 查询 </s-button>
        <s-button
          icon="stop-outlined"
          style="margin-left: 8px"
          @click="
            () => {
              query = {}
              $refs.table.search(query)
            }
          "
        >
          重置
        </s-button>
      </template>
    </s-tool-bar>
    <s-table
      ref="table"
      bordered
      :scroll="{ y: tableHeight }"
      :columns="columns"
      url="/exception/pageList"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a v-if="authorize.selectOneById" style="margin-right: 8px" @click="detail(record.id)">
            <s-icon type="eye-outlined" />查看
          </a>
          <a-popconfirm
            v-if="authorize.delete"
            title="确认删除此条数据？"
            ok-text="是"
            cancel-text="否"
            @confirm="deleteById(record.id)"
          >
            <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
          </a-popconfirm>
        </template>
      </template>
    </s-table>
    <s-dynamic-form-dialog
      ref="detail"
      v-model="detailFormValue"
      disabled
      form-id="71ead5d2c93d4a9183c3b180987d43d4"
    ></s-dynamic-form-dialog>
  </a-card>
</template>

<script>
const columns = [
  {
    title: '接口',
    dataIndex: 'interfaceTag',
    sorter: true,
    width: 200,
    ellipsis: true
  },
  {
    title: '异常信息',
    dataIndex: 'exceptionMsg',
    ellipsis: true
  },
  {
    title: '报错时间',
    dataIndex: 'happenTime',
    sorter: true,
    width: 200,
    ellipsis: true
  },
  {
    title: '操作',
    width: 150,
    fixed: 'right',
    key: 'action'
  }
]
import Detail from './detail/index.vue'
export default {
  name: 'QueryList',
  components: { Detail },
  data() {
    return {
      query: {},
      detailFormValue: {},
      columns: columns
    }
  },
  authorize: '/exception/permissionList',
  methods: {
    detail(id) {
      const that = this
      that.$refs.detail.init((dialog) => {
        that.$loading(true)
        that.$api
          .GET('/exception/selectOneById', { id: id })
          .then((res) => {
            that.$loading(false)
            if (!res.data) {
              that.$message.warn('数据不存在')
            } else {
              that.detailFormValue = res.data
              dialog.open()
            }
          })
          .catch(() => {
            that.$loading(false)
          })
      })
    },
    search() {
      const search = { exceptionMsg: this.query.exceptionMsg }
      if (this.query.happenTime) {
        search.startTime = this.query.happenTime[0]
        search.endTime = this.query.happenTime[1]
      }
      this.$refs.table.search(search)
    },
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api
          .DELETE('/exception/deleteMulti', { ids: keys.toString() })
          .then(() => {
            this.$loading(false)
            this.$refs.table.refresh()
          })
          .catch(() => {
            this.$loading(false)
          })
      }
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/exception/delete', { id: id })
        .then(() => {
          this.$loading(false)
          this.$refs.table.refresh()
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
